<template>
	<view class="container">
		<view class="longBox" @click="goUpdatePassword">
			<view class="title">账号管理</view>
			<view class="right">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="backLogin" v-if="userInfo">
			<button type="default" style="background-color: #fff" @click="backLogin">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { getStatusBarHeight } from '../../utils/system';
const userInfo = computed(() => uni.getStorageSync('user_info'));

const backLogin = () => {
	uni.removeStorageSync('access_token');
	uni.removeStorageSync('refresh_token');
	uni.removeStorageSync('user_info');
	uni.showModal({
		title: '是否要退出登录',
		cancelText: '取消',
		confirmText: '退出',
		success: function (res) {
			if (res.confirm) {
				uni.showToast({
					title: '退出成功！'
				});
				uni.removeStorageSync('access_token');
				uni.removeStorageSync('refresh_token');
				uni.removeStorageSync('user_info');
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	});
};
const goUpdatePassword = () => {
	if (uni.getStorageSync('user_info')) {
		uni.navigateTo({
			url: '/pages/updatePassword/updatePassword'
		});
	} else {
		uni.showToast({
			title: '请登录注册',
			icon: 'none'
		});
		uni.navigateTo({
			url: '/pages/register/register'
		});
	}
};
</script>

<style lang="scss" scoped>
body {
	background-color: #f8f8f8;
}
.container {
	height: 100vh;

	.longBox {
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		padding: 20rpx;
		margin: 20rpx 0;
	}
}
</style>
